<script lang="ts" setup>
import { googleSdkLoaded } from 'vue3-google-login'
import { showToast } from 'vant'
const emit = defineEmits(['close', 'logined'])
const { setting } = storeToRefs(useUserStore())
const { updateUserInfo, getUserInfo } = useUserStore()

function login() {
  emit('close')

  if (!window.google) {
    return showToast({
      message: 'Network error !please check network',
    })
  }

  if (!setting.value?.google) {
    return showToast('Google account available!')
  }

  const loading = showLoadingToast({
    duration: 0,
    message: 'Logging in...',
  })

  googleSdkLoaded(google => {
    google.accounts.oauth2
      .initCodeClient({
        client_id: setting.value.google,
        scope: 'email profile openid',
        callback: async response => {
          const { code } = response
          const { Data } = await useRequest.post('/Login', {
            code,
            redirect_uri: `${location.protocol}//${location.host}`,
          })
          delete Data.user_id
          updateUserInfo(Data)
          getUserInfo()
          loading.close()
          emit('logined')
        },
        error_callback: () => {
          loading.close()
        },
      })
      .requestCode()
  })
}
</script>

<template>
  <div class="login-box">
    <div class="logo"></div>

    <div class="app-title">Shorts TV</div>

    <div class="welcome">Welcome to Shorts TV!</div>

    <div
      class="login-btn"
      @click="login">
      <div class="icon-wrap">
        <svg-icon
          name="google"
          class="google-icon">
        </svg-icon>
      </div>
      <div class="login-text">Sign in with Google</div>
    </div>

    <div class="proto">
      By continuing.I agree to the
      <a href="/proto/service_agreet"> Service Agreement </a>
      &nbsp;and&nbsp;
      <a href="/proto/privacy_policy"> Privacy Policy. </a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-box {
  padding: 24px;
  width: 268px;
  border-radius: 12px;
  background-color: #21202f;
  .logo {
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 16px;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
    background-color: $primary-color;
    @include bgimg(contain, 'logo.png');
  }
  .app-title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 12px;
    color: #fff;
  }
  .welcome {
    margin-bottom: 30px;
    text-align: center;
    color: #d3d2d7;
  }
  .login-btn {
    @include flexbox($ai: center);
    margin-bottom: 30px;
    font-size: 13px;
    width: 220px;
    height: 32px;
    padding-left: 16px;
    border-radius: 4px;
    background-color: $primary-color;
    color: #fff;
    cursor: pointer;
    .icon-wrap {
      @include flexbox($jc: center, $ai: center);
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 20px;
      margin-right: 20px;
    }
    .login-text {
      position: relative;
      top: -1px;
    }
  }
  .proto {
    font-size: 12px;
    color: #d3d2d7;
    a {
      color: $primary-color;
      text-decoration: underline;
    }
  }
}
</style>
